今天再度要進入新的篇章啦！！！
身為軟體工程師，想要設計出好的系統架構，或是綜觀地去理解系統的話，UML 都是不可或缺的，但我在轉職自學的過程中卻遲遲沒有碰到這個觀念，直到開始工作才從前輩那邊知道這個東西的，真的覺得相見恨晚！
那以下就讓我來概述一下 UML，並在後續幾天實際畫一些 UML 來給各位看看！

為什麼要用 UML？

其實在上面介紹時就已經回答這個問題了 — 「釐清軟體系統架構」。

隨著日復一日的開發，一開始簡簡單單的網頁就會變成超出我們想像的大系統，這種時候可不能繼續只把架構跟邏輯放在各個開發者的腦袋裡，這樣不論是日後有其他人要進來協作還是自己回去重構、Debug 上都會造成很大的認知負擔。

因此，這時候就需要像 UML 這種東西來協助我們去統整跟梳理軟體系統的架構，當然應該還有很多種方式可以去做到類似的事情，但我自己在元件庫的開發上是有使用到 UML 的，也認為透過這張圖讓我更理解元件之間的關係了。

那什麼是 UML？

UML (Unified Modeling Language) ，直翻過來是「統一塑模語言」，相信光看名字絕對不知道這是在說什麼，那我們先來看看維基百科怎麼說：

「UML是一種開放的方法，用於說明、可視化、構建和編寫一個正在開發的、物件導向的、軟體密集系統的製品的開放方法」

「塑模」的意思就是以圖形的方式，先將系統的功能與結構畫成模型與藍圖，然後再依據藍圖進行實體開發，類似「流程圖」的概念。

一言以蔽之，UML 就是 「以圖形的方式，將系統的功能與結構畫成的模型與藍圖」。

而 UML 有很多種圖表可以呈現，不同的 UML 來滿足不同的需求，今天會介紹的是描述元件之間的依賴鏈的是元件圖 (Component Diagram) ，常見的還有物件導向的類別圖 (Class Diagram) 和壯態管理會用的狀態圖 (State Diagram)。

元件圖 Component Diagram

https://upload.wikimedia.org/wikipedia/commons/7/74/Component-4.png

元件圖這邊很單純，就是反映出元件之間的依賴關係反映出元件之間的依賴關係。

介面（ Interface ）就如同 Day 04 所說的，是一項功能的抽象化。

元件（ Component ）就是指那一個個的 UI 元件。

大多數的元件都可以追溯到一個介面，也就是先實作介面，再慢慢擴充成一個個元件，接下來這系列每天都會畫一個 UML 來讓大家更理解這個概念。

那先給大家看看一個 UI 元件庫的元件圖可能會長成什麼樣子：

簡易清晰一點的版本：

大方向就是 介面（Interface） 會是基底，並連接許多元件，而單一元件不一定只會連接到一個介面，還是覺得看不清楚的沒關係，後續幾天會各自去介紹裡面的每個小區塊的！
簡易版的是我實作的版本，那其實還有很多介面是可以再抽出來的，就等全部介紹完再跟大家說說有哪些優化方向了！

這系列會怎麼介紹？

除了透過 UML 來介紹元件間的依賴關係之外，這個篇章還有一大重點是：

希望把所有（或至少會把九成的元件介紹一遍）會用到的 UI 元件介紹一輪，介紹的主要方向會是「開發者會預期怎麼去使用這些元件（也就是元件的 API 設計）」、「各個元件的使用情境（為什麼需要這些 UI 元件的，它們解決網站互動或呈現上的什麼需求）」。

小結

今天是新篇章，所以其實算是導覽的性質，帶大家理解 UML 的概念跟介紹我們會使用的 元件圖 (Component Diagram) 之後，明天開始就會一個個去畫這些圖並跟大家介紹了！

而在各家對元件分類的方式都不一樣的情況下，元件的 UML 也是可以不一樣的，該如何去規劃元件之間的關係跟封裝它們都沒有絕對，大原則就是團隊使用起來順手、有共識，或是文件要寫得好，避免使用者踩到一些莫名其妙的雷！

那就明天見囉！

References
https://app.diagrams.net/
https://hooo.medium.com/工作筆記-關於uml的一點小分享-a06cdd9d912d
http://tx.liberal.ntu.edu.tw/InfoMgt/Jx/IS_IM/uml.htm
https://ithelp.ithome.com.tw/articles/10223499
https://glj8989332.blogspot.com/2018/02/design-pattern-uml.html